<template>
  <el-container style="height: 100%;">
    <el-header style="background-color: cadetblue;">Header</el-header>
    <el-container>
    <el-aside width="200px" style="background-color:slategrey;">
        <!-- 一级菜单标签  el-submenu -->
        <!-- 二级菜单标签  el-menu-item -->
        <el-menu
      default-active="2"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu :index="menu.id+''" v-for="menu in menuList" :key="menu.id">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{menu.name}}</span>
        </template>
        
          <el-menu-item :index="ch.id+''"  v-for="ch in menu.childrenMenu" :key="ch.id" @click="handleRoute(ch)">{{ch.name}}</el-menu-item>

      </el-submenu>
     
    </el-menu>
    </el-aside>
    <el-main >
    <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
  data() {
    return {
      menuList:[
            {id:1,name:'门诊部',icon:'el-icon-menu',
            childrenMenu:[{id:'2',name:'接诊列表',url:'/visitList'},{id:'3',name:'1',url:'/personnelList'}]
        }
    //     // ,
    //     // {id:4,name:'人员管理',icon:'el-icon-s-custom',
    //     //     childrenMenu:[{id:5,name:'人员列表'},{id:6,name:'权限分配'}]
    //     // }
    ]
    }
  },

  methods: {
    handleRoute(ch){
      this.$router.push(ch.url)
    }
  },
  components:{
    
  }
}
</script>

<style scoped>
</style>